<template>
  <view class="my_patient">
    <view class="patient_list">
      <view
        class="card patient_item m16"
        v-for="(item, index) in patientList"
        :key="item._id"
        @click="selectPatient(item.name, item._id)"
      >
        <!-- 姓名和关系 -->
        <view class="txt patient_name">
          <text>{{ item.name }}</text>
          <text class="patient_relation">{{ item.relation }}</text>
        </view>
        <!-- 年龄，性别，手机号 -->
        <view class="txt patient_info">
          <text>{{ item.sex }}</text>
          <text>{{ item.age }}岁</text>
          <text>{{ item.phone }}</text>
        </view>
      </view>
    </view>
    <!-- 占位高度 -->
    <view style="height: 300rpx"></view>
    <view class="submit_btns">
      <text>取消</text>
      <text @click="addPatientInfo">添加就诊人</text>
    </view>
    <!-- 底部footer -->
    <Empty :show="show" title="暂无就诊人" />
  </view>
</template>

<script setup lang="ts">
import Empty from "@/components/empty.vue";
import { onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
import { getPatientInfoApi } from "@/http/api";
import type { PatientInfoItem } from "@/tsDataType/dataType";
//引入pinia store
import { patientStore } from "@/store/index";

const show = ref(true);

onShow(() => {
  getPatientInfo();
});

//定义就诊人数组
const patientList = ref<PatientInfoItem[]>([]);

//获取就诊人信息
const getPatientInfo = async () => {
  const res = await getPatientInfoApi();
  console.log("获取就诊人信息：", res);
  if (res.data.data.length > 0) {
    patientList.value = res.data.data;
    show.value = false;
  }
};

//选择就诊人
const store = patientStore();
const selectPatient = (name: string, id: string) => {
  console.log(name);
  console.log(id);
  //将病人name和id传给pinia
  store.addPatient({
    name,
    patient_id: id,
  });

  //返回上一个页面
  uni.navigateBack({
    delta: 1,
  });
};

//点击添加就诊人
const addPatientInfo = () => {
  uni.navigateTo({
    url: "/pages/my_patient/add_patient",
  });
};
</script>

<style lang="scss">
@import "@/assets/style/public.scss";
page {
  background: #e4e4e4;
}

.txt {
  display: flex;
  margin-top: 14px;
  text {
    padding: 8rpx 16rpx;
    display: block;
  }

  &:nth-of-type(1) {
    font-weight: bold;
    font-size: 16px;
  }

  .patient_relation {
    background: #dcf2fc;
    color: #a9daf0;
  }
}

.submit_btns {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  padding: 20rpx;
  display: flex;
  justify-content: space-around;
  text {
    padding: 14rpx 30rpx;
    border-radius: 8rpx;
    width: 200rpx;
    text-align: center;

    &:nth-of-type(1) {
      background: #ecf2fd;
      color: #5972c6;
    }

    &:nth-of-type(2) {
      background: #4677e2;
      color: #fff;
    }
  }
}
</style>
